<ng-container *ngIf="selection">
  <nav ngbNav
       #nav="ngbNav"
       (navChange)="softRefresh()"
       class="nav-tabs"
       cdStatefulTab="cephfs-tabs">
    <ng-container ngbNavItem="details">
      <a ngbNavLink
         i18n>Details</a>
      <ng-template ngbNavContent>
        <cd-cephfs-detail [data]="details">
        </cd-cephfs-detail>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="clients">
      <a ngbNavLink>
        <ng-container i18n>Clients</ng-container>
        <span class="badge badge-pill badge-tab ms-1">{{ clients.data.length }}</span>
      </a>
      <ng-template ngbNavContent>
        <cd-cephfs-clients [id]="id"
                           [clients]="clients"
                           (triggerApiUpdate)="refresh()">
        </cd-cephfs-clients>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="directories">
      <a ngbNavLink
         i18n>Directories</a>
      <ng-template ngbNavContent>
        <cd-cephfs-directories [id]="id"></cd-cephfs-directories>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="performance-details">
      <a ngbNavLink
         i18n>Performance Details</a>
      <ng-template ngbNavContent>
        <cd-grafana i18n-title
                    title="CephFS MDS performance"
                    [grafanaPath]="'mds-performance?var-mds_servers=mds.' + grafanaId"
                    [type]="'metrics'"
                    uid="tbO9LAiZz"
                    grafanaStyle="one">
        </cd-grafana>
      </ng-template>
    </ng-container>
  </nav>

  <div [ngbNavOutlet]="nav"></div>
</ng-container>
